<template>
  <div class="box">
    <div class="top">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="4">
          <div
            style="border-radius:20px;cursor: pointer;height:90px;border: 1px solid #ccc;display: flex;flex-direction: column;align-items: center;justify-content: center;"
            :style="carInfo.Allstatus === '' ? 'background:#66b1ff' : ''"
            @click="statusAll('')"
          >
            <span>{{ statistics.allTotal }}</span>
            <span class="carStatue">全部</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div
            style="border-radius:20px;cursor: pointer;height:90px;border: 1px solid #ccc;display: flex;flex-direction: column;align-items: center;justify-content: center;"
            :style="carInfo.Allstatus === '101' ? 'background:#66b1ff' : ''"
            @click="statusAll('101')"
          >
            <span>{{ statistics.notSaleTotal }}</span>
            <span class="carStatue">未上架车辆</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div
            style="border-radius:20px;cursor: pointer;height:90px;border: 1px solid #ccc;display: flex;flex-direction: column;align-items: center;justify-content: center;"
            :style="carInfo.Allstatus === '102' ? 'background:#66b1ff' : ''"
            @click="statusAll('102')"
          >
            <span>{{ statistics.auditTotal }}</span>
            <span class="carStatue">审核中车辆</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div
            style="border-radius:20px;cursor: pointer;height:90px;border: 1px solid #ccc;display: flex;flex-direction: column;align-items: center;justify-content: center;"
            :style="carInfo.Allstatus === '103' ? 'background:#66b1ff' : ''"
            @click="statusAll('103')"
          >
            <span>{{ statistics.rejectTotal }}</span>
            <span class="carStatue">被驳回车辆 </span>
          </div>
        </el-col>
        <el-col :span="4">
          <div
            style="border-radius:20px;cursor: pointer;height:90px;border: 1px solid #ccc;display: flex;flex-direction: column;align-items: center;justify-content: center;"
            :style="carInfo.Allstatus === '104' ? 'background:#66b1ff' : ''"
            @click="statusAll('104')"
          >
            <span>{{ statistics.blockTotal }}</span>
            <span class="carStatue">被拉黑车辆 </span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="seach">
      <el-row :gutter="20" style="display:flex">
        <el-col :span="6" style="min-width:399px">
          <span class="lable">车源ID</span>
          <span class="label_input">
            <el-input v-model="carInfo.carId" placeholder="请输入内容" />
          </span>
        </el-col>
        <el-col :span="5" style="min-width:330px">
          <span class="lable">用户ID</span>
          <span class="label_input">
            <el-input v-model="carInfo.userId" placeholder="请输入内容" />
          </span>
        </el-col>
        <el-col :span="5" style="min-width:330px">
          <span class="lable">VIN</span>
          <span class="label_input"><el-input v-model="carInfo.vin" placeholder="请输入内容" />
          </span>
        </el-col>
        <el-col :span="8" style="min-width:530px">
          <span class="lable">上牌地</span>
          <span style="display:flex" class="label_input">
            <el-select
              v-model="carInfo.applyProvid"
              style="margin-right:20px"
              placeholder="请选择省份"
              filterable
              clearable
              @change="changeProvid"
            >
              <el-option
                v-for="item in carInfo.optionsProvid"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <el-select
              v-model="carInfo.applyCity"
              placeholder="请选择市区"
              :disabled="!carInfo.applyProvid"
              filterable
              clearable
            >
              <el-option
                v-for="item in carInfo.optionscity"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </span>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top:30px;display:flex">
        <el-col :span="8" style="min-width:520px">
          <span class="lable">创建车源时间</span>
          <span class="label_input">
            <el-date-picker
              v-model="carInfo.createCarTime"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </span>
        </el-col>
        <el-col :span="7" style="min-width:462px">
          <span class="lable">上牌时间</span>
          <span class="label_input">
            <el-date-picker
              v-model="carInfo.applyTime"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </span>
        </el-col>
        <el-col :span="5" style="min-width:330px">
          <span class="lable">所在环节</span>
          <span class="label_input">
            <el-select v-model="carInfo.status" placeholder="请选择" clearable>
              <el-option
                v-for="item in carInfo.statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </span>
        </el-col>
        <el-col :span="2" style="min-width:130px">
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </div>

    <el-table v-loading="loading" :data="tableData" style="width: 100%;margin-top:30px;padding-bottom:1px" border>
      <el-table-column type="index" width="50" label="序号" align="center" />
      <el-table-column
        v-for="item in params"
        :key="item.code"
        :label="item.text"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="item.text === '状态'">
            <!-- "childrenStatus": null, //状态：101-未上架、102-审核中、103-被驳回、104-未上架被拉黑 -->
            {{
              scope.row[item.paramsCode] == "101"
                ? "未上架"
                : scope.row[item.paramsCode] == "102"
                  ? "审核中"
                  : scope.row[item.paramsCode] == "103"
                    ? "被驳回"
                    : scope.row[item.paramsCode] == "104"
                      ? "未上架被拉黑"
                      : ""
            }}
          </span>
          <span v-else-if="item.text == '所在环节'">
            <!-- "putawayStep": null //上架步骤: 0人车认证、1车辆基础信息、2车辆图片视频、3车况描述、4发布信息、5发布服务、6发布预览 -->
            {{
              scope.row[item.paramsCode] == "0"
                ? "人车认证"
                : scope.row[item.paramsCode] == "1"
                  ? "车辆基础信息"
                  : scope.row[item.paramsCode] == "2"
                    ? "车辆图片视频"
                    : scope.row[item.paramsCode] == "3"
                      ? "车况描述"
                      : scope.row[item.paramsCode] == "4"
                        ? "发布信息"
                        : scope.row[item.paramsCode] == "5"
                          ? "发布服务"
                          : scope.row[item.paramsCode] == "6"
                            ? "发布预览"
                            : ""
            }}
          </span>
          <span v-else>
            {{ scope.row[item.paramsCode] }}
          </span>
        </template>
      </el-table-column>
      <el-table-column width="50" label="操作" align="center">
        <template slot-scope="scope">
          <span style="cursor: pointer;" @click="goto(scope.row.carInfoId)">详情</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pagination.total > 0"
      :total="pagination.total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="inquire"
    />
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      carInfo: {
        carId: '', // 车源ID
        userId: '', // 用户ID
        vin: '', // vin
        applyProvid: '', // 上牌省份
        applyCity: '', // 上牌地
        applyCityName: '', // 上牌地
        createCarTime: '', // 创建车源时间
        applyTime: '', // 上牌时间
        status: '', // 状态
        statusOptions: [
          {
            value: '0',
            label: '人车认证'
          },
          {
            value: '1',
            label: '车辆基础信息'
          },
          {
            value: '2',
            label: '车辆图片视频'
          },
          {
            value: '3',
            label: '车况描述'
          },
          {
            value: '4',
            label: '交车设置'
          },
          {
            value: '5',
            label: '上架服务'
          },
          {
            value: '6',
            label: '发布预览'
          }
        ],
        Allstatus: '',
        optionsProvid: [],
        optionscity: []
      },
      pagination: {
        pageSize: 20,
        pageNum: 1,
        total: 0
      },
      tableData: [],
      params: [
        {
          paramsCode: 'carSourceNo',
          text: '车源ID'
        },
        {
          paramsCode: 'createTime',
          text: '创建车源时间'
        },

        {
          paramsCode: 'userId',
          text: '用户ID'
        },
        {
          paramsCode: 'vin',
          text: 'VIN'
        },
        {
          paramsCode: 'spCity',
          text: '上牌地'
        },
        {
          paramsCode: 'spTime',
          text: '上牌时间'
        },
        {
          paramsCode: 'childrenStatus',
          text: '状态'
        },
        {
          paramsCode: 'putawayStep',
          text: '所在环节'
        }
      ],
      statistics: {},
      loading: false
    }
  },
  created() {
    this.$get('/web/areas/get/all/bsProvince').then(res => {
      if (res.data.code === '0') {
        this.carInfo.optionsProvid = res.data.data
        console.log('this', this.optionsProvid)
      }
    })
    this.totalTopEvent()
    this.inquire()
  },
  methods: {
    statusAll(e) {
      console.log('213')
      this.carInfo.Allstatus = e
      this.inquire()
      console.log(this.carInfo.Allstatus)
    },
    inquire() {
      const data = {
        queryRequest: {
          pageSize: this.pagination.pageSize, // 页大小
          pageNum: this.pagination.pageNum // 页码
        }, // 分页参数
        entity: {
          carSourceNo: this.carInfo.carId, // 车源ID
          userId: this.carInfo.userId, // 用户ID
          vin: this.carInfo.vin, // VIN
          spCity: this.carInfo.applyCityName, // 上牌城市
          createStartTime: this.carInfo.createCarTime
            ? this.carInfo.createCarTime[0]
            : '', // 创建车源开始时间
          createEndTime: this.carInfo.createCarTime
            ? this.carInfo.createCarTime[1]
            : '', // 创建车源结束时间
          licenStartTime: this.carInfo.applyTime
            ? this.carInfo.applyTime[0]
            : '', // 上牌开始时间
          licenEndTime: this.carInfo.applyTime ? this.carInfo.applyTime[1] : '', // 上牌结束时间
          childrenStatus: this.carInfo.Allstatus, // 状态：101-未上架、102-审核中、103-被驳回、104-未上架被拉黑
          putawayStep: this.carInfo.status // 上架步骤: 0人车认证、1车辆基础信息、2车辆图片视频、3车况描述、4发布信息、5发布服务、6发布预览
        } // 查询参数
      }
      this.loading = true
      this.$post('/web/vehicleStayOnSale/list', data, 'json').then(res => {
        console.log('ress', res)
        if (res.data.code === '0') {
          this.loading = false

          this.tableData = res.data.data.rows
          this.pagination.total = res.data.data.total
        }
      })
    },
    changeProvid(e) {
      this.carInfo.applyCity = ''
      this.$get(`/web/areas/get/all/bsCity?provinceId=${e}`).then(res => {
        if (res.data.code === '0') {
          this.carInfo.optionscity = res.data.data
          // this.cityList = res.data.data
        }
      })
    },
    reset() {
      this.carInfo.carId = ''
      this.carInfo.userId = ''
      this.carInfo.vin = ''
      this.carInfo.applyProvid = ''
      this.carInfo.applyCity = ''
      this.carInfo.createCarTime = ''
      this.carInfo.applyTime = ''
      this.carInfo.status = ''
    },
    search() {
      this.pagination.pageSize = 20
      this.pagination.pageNum = 1
      if (this.carInfo.applyCity) {
        this.carInfo.optionscity.forEach(item => {
          if (item.id === this.carInfo.applyCity) {
            this.carInfo.applyCityName = item.name
          }
        })
      } else {
        this.carInfo.applyCityName = ''
      }
      this.inquire()
      console.log(this.carInfo)
    },
    goto(carInfoId) {
      this.$router.push('/carAdmin/putawayList?carInfoId=' + carInfoId)
    },
    totalTopEvent() {
      this.$post(
        '/web/vehicleStayOnSale/statistics',
        {
          carSourceNo: '', // 车源ID
          userId: '', // 用户ID
          vin: '', // VIN
          spCity: '', // 上牌城市
          createStartTime: '', // 创建车源开始时间
          createEndTime: '', // 创建车源结束时间
          licenStartTime: '', // 上牌开始时间
          licenEndTime: '', // 上牌结束时间
          childrenStatus: '', // 状态：101-未上架、102-审核中、103-被驳回、104-未上架被拉黑
          putawayStep: '' // 上架步骤: 0人车认证、1车辆基础信息、2车辆图片视频、3车况描述、4发布信息、5发布服务、6发布预览
        },
        'json'
      ).then(res => {
        if (res.data.code === '0') {
          this.statistics = res.data.data
        }
        console.log('ress', res)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.box /deep/ {
  padding: 20px;
  margin: 20px;
    .el-range-separator{
    width: 7%;
  }
  .top {
    margin-bottom: 30px;
    .carStatue {
      margin-top: 20px;
    }
  }
  .seach {
    .el-col {
      display: flex;
      align-items: center;
      .lable {
        // min-width: 100px;
        margin-right: 20px;
      }
      .label_input{
        // min-width: 300px;
      }
    }
  }
}
</style>
